<template>
	<uni-header title="昵称"></uni-header>
	<view class="item">
		<input type="text" v-model="nuckName" />
	</view>
	<button class="submit" @click="submit">提交</button>
</template>

<script setup>
	import {
		userUpdate,
		userInfo
	} from '@/util/api.js'
	import {
		ref,
		onMounted
	} from "vue";
	const user = ref({})
	const nuckName = ref()
	
	onMounted(async () => {
		const result = await userInfo()
		console.log(result.data)
		user.value = result.data.data
		nuckName.value = user.value.nickName
		console.log(user.value)
	})

	const submit = async () => {
		if (!nuckName.value) {
			uni.showToast({
				title: "请输入昵称",
				icon: "none"
			})
			return false
		}
		const result = await userUpdate({
			nickName: nuckName.value
		})
		uni.showModal({
			title: '提示',
			showCancel: false,
			content: "修改成功",
			success: () => {
				uni.navigateBack()
			}
		})
	}
</script>

<style scoped lang="scss">
	.item {
		width: 686rpx;
		height: 128rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 2rpx solid #F2F4FA;

		margin: 0 auto;

		input {
			flex: 2;
			display: block;
			height: 100%;
			font-size: 32rpx;
			// width: ;
		}
	}

	.submit {
		width: 686rpx;
		height: 92rpx;
		background: #1E53E7;
		border-radius: 16rpx;
		position: absolute;
		bottom: 68rpx;
		left: 32rpx;
		color: #fff;
		font-size: 32rpx;
		font-weight: 500;
		line-height: 92rpx;
	}
</style>